<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1.表单验证</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./dist/jquery.validate.js"></script>
    <script src="./dist/localization/messages_zh.js"></script>
    <!--<script src="../dist/localization/messages_zh.js"></script>-->
    <style>

    </style>
</head>

<body>
    <form action="#">
        <ul>
            <li><label for="userName">用户名：</label><input type="text" name="userName" id="userName"></li>
            <li><label for="email">邮箱:</label><input type="text" name="email" id="email"></li>
            <li><label for="psw">密码:</label><input type="text" name="psw" id="psw"></li>
            <li><label for="conpsw">验证密码:</label><input type="text" name="conpsw" id="conpsw"></li>
            <li>
                <fieldset>
                    <legend>性别选项</legend>
                    <input type="radio" name="gender" id="man"><label for="gender">男</label>
                    <input type="radio" name="gender" id="woman"><label for="gender">女</label>
                </fieldset>
            </li>
            <li><select name="equip" id="" multiple>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        <select></li>
      <li><input type="checkbox" name="agree" id="agree"><label for="agree">是否订阅</label></li>
      <li>
        <input type="checkbox" name="quDao" id="b"><label for="b">报纸</label>
        <input type="checkbox" name="quDao" id="w"><label for="w">网络</label>
        <input type="checkbox" name="quDao" id="d"><label for="d">电视</label>
      </li>

      <li><input type="submit" value="提交"></li>
    </ul>
  </form>
  <script>
    // $('form').validate()
    $(function() {
      $.validate.setDefault({
        
      })
      $('form').validate({

        //调试模式  验证完成不提交表单
        debug: true,
        //验证规则
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        },    
        rules: {
          userName: {
            //input 的name
            //是否必填 最小字符数  最大字符数
            required: true,
            minlength: 4,
            maxlength: 8,
          },
          email: {
            //email邮箱 url网络地址 date nunmber有效数字(小数 负数) digits只能是数字(整数)  creditcard信用卡 
            required: true,
            email: true //必须符合邮箱格式

          },
          psw: {
            required: true,
            minlength: 6,
            maxlength: 10,
          },
          conpsw: {
            required: true,
            equalTo: '#psw', //equalTo 内容一致
          },
          gender: {
            required: true
          },
          equip: {
            required: true,
            minlength: 2
          },
          quDao: {
            //在#agree选择的情况下才验证
            required: '#agree:checked'
          }
        },
        //验证提示信息
        messages: {
          userName: {
            required: '请输入用户名',
            minlength: '至少输入4个字符',
            maxlength: '至多输入8个字符',
          },
          email: {
            //
            required: '请输入邮箱',
            email: '输入正确邮箱格式'
          },
          psw: {
            required: '请输入密码',
            minlength: '至少输入6个字符',
            maxlength: '至多输入10个字符',
          },
          conpsw: {
            required: '请确认密码',
            equalTo: '两次密码输入不一致',
          },
          gender: {
            required: '请选择性别'
          },
          equip: {
            required: '请选择装备',
            minlength: '至少选择2个装备'
          },
          quDao: {
            //在#agree选择的情况下才验证
            required: '请至少选择一个渠道'
          }
        }
      })
    })
  </script>
</body>

<ml>